<template>
	<div class="container">
		<van-nav-bar fixed left-text="返回" left-arrow :title="!isWeixin() ? '我的推广' : ''" @click-left="handleBack" />
		<div class="topHead">
			<div class="topHead-thead ">
				<span>推广数据</span>
				<div class="topHead-thead-tips" @click="goIncomeRecord">
					<span>收益记录</span>
					<van-icon name="arrow" />
				</div>
			</div>
			<div class="topHead-tbody ">
				<div class="topHead-tbody-item borderRight">
					<span>{{tgInfo.num}}</span>
					<span>推广用户（人）</span>
				</div>
				<div class="topHead-tbody-item">
					<span>{{tgInfo.price}}</span>
					<span>累计收益（元）</span>
				</div>
			</div>
		</div>
		<!-- 推广用户列表 -->
		<div class="recmandUserLisrt" v-if="tgUser.length>0">
			<span style="margin-bottom: 10px;display: inline-block;">推广用户</span>
			<div class="">
				<div class="tgUser-item" v-for="(item,index) in tgUser">
					<div class="tgUser-item-left">
						<van-image round width="30" height="30" :src='item.logo'></van-image>
						<span>{{item.nickname}}</span>
					</div>
					<span
						class="tgUser-item-right">{{dayjs.unix(item.create_time).format("YYYY-MM-DD HH:mm:ss")}}</span>
				</div>
			</div>
		</div>
		<div class="emptyUserList" v-else>
			<van-empty image-size="50" description="暂无推广用户" />
		</div>
		<!-- 兑换规则 -->
		<div class="tuiGuangRule">
			<div class="" v-html="tgInfo.content">

			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import {
		getCookie
	} from "@/utils/index";
	import {
		ref,
		reactive
	} from "vue";
	import {
		useRouter,
		useRoute
	} from "vue-router";
	import {
		isWeixin
	} from "@/utils/index";
	import {
		usertg, tgusers
	} from "@/api/user";
	import {
		showLoadingToast,
		showSuccessToast,
		showFailToast,
		showConfirmDialog,
		showToast
	} from 'vant';
	import {
		json
	} from "stream/consumers";
	import dayjs from "dayjs";
	const router = useRouter();
	const route = useRoute();
	const tgInfo = ref();
	const tgUser = ref();
	const pageNo = ref(1);
	const pageSize = ref(15);
	// 获取推广信息
	const getTuiguang = async () => {
		let { data } = await usertg({ uid: getCookie("token") ? Number(getCookie("token")) : "" });
		tgInfo.value = data;
	};
	getTuiguang();
	// 获取我的推广用户列表
	const getTuiguangUser = async () => {
		let { data } = await tgusers({
			uid: getCookie("token") ? Number(getCookie("token")) : "",
			pageNo: pageNo.value,
			pageSize: pageSize.value
		});

		tgUser.value = data.data;
	};
	getTuiguangUser();
	const handleBack = () => {
		if (history.state?.back) {
			router.back();
		} else {
			router.push("/user");
		}
	};
	const goIncomeRecord = () => {
		router.push("/incomeRecord");
	}
</script>

<style>
	.topHead {
		background: #fff;
		margin: 60px 10px 0 10px;
		border-radius: 10px;
		padding: 10px;
		filter: drop-shadow(2px 4px 6px #e5e5e5);
	}

	.topHead-thead {
		display: flex;
		justify-content: space-between;
	}

	.topHead-thead-tips {
		font-size: 13px;
		color: #999999;
	}

	.topHead-tbody {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}

	.topHead-tbody-item {
		flex-direction: column;
		display: flex;
		align-items: center;
		width: 45%;
	}

	.borderRight {
		border-right: 1px solid #e5e5e5;
	}

	.topHead-tbody-item span:first-child {
		font-size: 20px;
		/* font-weight: bolder; */
	}

	.topHead-tbody-item span:nth-child(2) {
		color: #999999;
		font-size: 12px;
		margin-top: 10px;
	}

	.recmandUserLisrt {
		height: 300px;
		max-height: 300px;
		background: #fff;
		margin: 10px;
		border-radius: 10px;
		padding: 10px;
		filter: drop-shadow(2px 4px 6px #e5e5e5);
	}

	.emptyUserList {
		background: #fff;
		margin: 10px;
		border-radius: 10px;
		padding: 10px;
		filter: drop-shadow(2px 4px 6px #e5e5e5);
	}

	/* 添加这段样式后，Primary Button 会变成红色 */
	:root:root {
		--van-empty-padding: 0;
	}

	.tuiGuangRule {
		background: #fff;
		margin: 10px;
		border-radius: 10px;
		padding: 10px;
		filter: drop-shadow(2px 4px 6px #e5e5e5);
	}

	.tgUser-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.tgUser-item-left {
		display: flex;
		align-items: center;
	}

	.tgUser-item-left span {
		margin-left: 10px;
		display: inline-block;
		width: 130px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tgUser-item-right {
		color: #999999;
		font-size: 12px;
	}
</style>